<template>
  <view class="page">
    <u-sticky bg-color="#fff">
      <Tabs
        :list="typeList"
        :current="current"
        :line-bottom="0"
        :line-width="42"
        @click="handleTab"
        style="padding: 20rpx"
      />
    </u-sticky>
    <view :style="{ padding: '0 20rpx', margin: '20rpx 0' }">
      <u-input
        v-model="queryForm.search"
        placeholder="搜索你需要的内容"
        suffix-icon="search"
        clearable
        suffix-icon-style="color: #909399"
        shape="circle"
        border="none"
        font-size="13px"
        @confirm="handleSearch"
        @clear="handleClear"
        :custom-style="{
          background: '#FBFBFB',
          padding: '6px',
          boxShadow: '0 0 20rpx rgba(186, 186, 186, 0.1)',
        }"
      />
    </view>
    <view style="padding: 0 20rpx">
      <Scroll-row
        :list="typeList[current].chlid"
        :current="queryForm.smallType"
        key-label="name"
        key-name="id"
        border
        :active-bold="false"
        padding="20rpx 20rpx 20rpx 0"
        @click="handleType"
      />
    </view>
    <view class="body">
      <u-swiper
        :list="popList"
        interval="5000"
        radius="10"
        indicator
        circular
        height="166"
        key-name="img"
        indicator-mode="dot"
        indicator-inactive-color="#BABABA"
        indicatorStyle="left: 40rpx; bottom: 10rpx"
      />
      <Sub-title label="推荐列表" bottom-color="#E9F4F4" />
      <Card-item
        v-for="(i, k) in dataList"
        :key="k"
        :index="i.id"
        :image="i.cover_img"
        :title="i.shopname"
        :bold="false"
        :sub-title="`地址：${i.address}`"
        @click="handleDetail"
      />
      <u-loadmore :status="status" />
    </view>
  </view>
</template>
<script>
import Tabs from "@/components/Tabs/index";
import ScrollRow from "@/components/ScrollRow/index";
import CardItem from "@/components/CardItem/index";

import { homePartyBanner, homePartyType, homePartyList } from "@/request/homeApi.js";
export default {
  components: { Tabs, ScrollRow, CardItem },
  data() {
    return {
      current: 0, // 当前大类
      typeList: [], // 分类列表
      queryForm: {
        page: 1, // 页数
        pageSize: 10, // 条数
        big_type: "", // 一级类 ，不传代表全部
        smallType: "", // 二级类 ，不传代表全部
        search: "", // 搜索内容
      },
      total: 0, // 总数
      popList: [], // 轮播图
      dataList: [],
      status: "nomore", // 加载状态
    };
  },
  onReachBottom() {
    if (this.total <= this.dataList.length) return;
    this.page++;
    this.getDataList();
  },
  created() {
    this.getBannerList();
    this.getTypeList();
  },
  methods: {
    // 切换菜单
    handleTab(val) {
      this.current = val.index;
      this.queryForm.big_type = val.id;
      this.queryForm.smallType = val.chlid.length ? val.chlid[0].id : "";
      this.handleSearch();
    },
    // 获取轮播图列表
    getBannerList() {
      homePartyBanner().then((res) => {
        if (res.code == 1) {
          this.popList = res.data;
        }
      });
    },
    // 获取类型列表
    getTypeList() {
      homePartyType().then((res) => {
        if (res.code == 1) {
          res.data.forEach((i) => {
            i.chlid.unshift({
              name: "全部",
              id: "",
              icon: "",
            });
          });
          this.typeList = res.data;
          if (res.data.length) {
            this.current = 0;
            this.queryForm.big_type = res.data[0].id;
            this.queryForm.smallType = "";
          }
          this.getDataList();
        }
      });
    },
    // 获取数据列表
    getDataList() {
      this.status = "loading";
      homePartyList(this.queryForm)
        .then((res) => {
          if (res.code == 1) {
            this.dataList = res.data.list;
            let list = res.data.list;
            let page = this.queryForm.page;
            this.dataList = page == 1 ? list : this.dataList.concat(list);
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.status = this.total > this.dataList.length ? "loadmore" : "nomore";
        });
    },
    // 清空搜索
    handleClear() {
      this.queryForm.search = "";
      this.handleSearch();
    },
    // 搜索
    handleSearch() {
      this.queryForm.page = 1;
      this.getDataList();
    },
    // 切换类型
    handleType(v) {
      this.queryForm.smallType = v.id;
      this.handleSearch();
    },
    // 查看详情
    handleDetail(val) {
      let tab = this.typeList[this.current];
      uni.navigateTo({
        url: `/pages/home/dietDetail?id=${val.id}&title=${tab.name}详情`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.page {
  .body {
    padding: 20rpx;
    .f-bottom {
      font-weight: 600;
      font-size: 28rpx;
      color: $active-color;
      margin-left: 20rpx;
      text:nth-child(2) {
        font-size: 24rpx;
      }
      text:last-child {
        font-size: 40rpx;
      }
    }
  }
}
</style>
